<template>
    <HeaderCom />
    <el-card class="div" :body-style="{ padding: '0px' }">
        <div class="div-top">
            <span class="div-top-span">标签</span>
        </div>
        <div class="divtag">
            <el-space wrap :size="size">
                <div v-for="item in TagList" :key="item.tag_id">
                    <el-check-tag style="font-size: 11px; color: rgb(119,120,121);" @change="onChange(1)">{{ item.tag_name }}</el-check-tag>
                </div>
            </el-space>
        </div>
    </el-card>
    <el-card class="div">

    </el-card>
</template>
<script lang='ts' setup>
import HeaderCom from "../components/HeaderCom.vue"
import { ref,onMounted } from 'vue'
import {GetTag} from '@/http'

const TagList = ref()
onMounted(async () => {
    TagList.value  = (await GetTag()).data.result
})
const size = ref(13)

function onChange(id: number) {
    console.log('id', id)

}
</script>
<style scoped lang="scss">
.div {
    margin: 0 auto;
    width: 60%;
    border-radius: 8px;
    margin-top: 18px;
}

.div-top {
    height: 50px;
    border-bottom: 1px solid rgb(235, 238, 245);

    .div-top-span {
        color: rgb(64, 184, 255);
        font-size: 14px;
        line-height: 50px;
        margin-left: 15px;
    }
}
.divtag{
    padding: 20px;
}
</style>